<template>
  <div v-if="closeFlag">
    <div class="k-resume-sure-modal">
      <span class="ksd-resume-close" @click="handleClose"><i class="iconfont icon-shanchu4"></i></span>
      <div class="bannerbox flex w100 align-center justify-center">
        <div class="flex flex-wrap">
          <div class="w100" @click="handleOpenPay">
            <button class="gda-btn gda-btn-danger  fz16"
                    style="width:100%;height: 58px;padding: 0 30px;border-radius: 8px;">
              <i class="iconfont icon-zhifujine mr5"></i>立即支付,即刻进入简历制作阶段
            </button>
          </div>
          <div class="w100 mt20 copy-btn" @click="handleOpenWeixin($event)" data-clipboard-target="#copyhtml">
            <button class="gda-btn gda-btn-primary fz16"
                    style="width:100%;height: 58px;padding: 0 30px;border-radius: 8px;">
              <i class="iconfont icon-weixin mr5"></i>咨询客服微信(xuchengfeifei)，获取兑换码
            </button>
            <div class="flex justify-center mt20" style="background:#eee;padding: 30px 0"><img style="width: 220px" src="https://ksd-social.oss-cn-shenzhen.aliyuncs.com/notes/a5db42480b6e91fd9cf54519543d5dbd/9d4f7be5c2fa45af93a6489fbd97db18.png"></div>
            <div id="copyhtml" style="position: fixed;top:-1000px;">xuchengfeifei</div>
          </div>
        </div>
      </div>
    </div>
    <div class="k-resume-sure-diaolog"></div>
  </div>
</template>
<script setup>
import Clipboard from "clipboard";
const closeFlag = ref(false)
const emits = defineEmits(["pay", "weixin"])
const handleOpen = () => {
  closeFlag.value = true
}
const handleClose = () => {
  closeFlag.value = false
  window.location.reload()
}

const handleOpenPay = () => {
  emits("pay")
}

const handleOpenWeixin = () => {
  const clipboard = new Clipboard('.copy-btn')
  // 复制成功
  clipboard.on('success', () => {
    useMessage().success('客服微信已经复制，微信好友添加即可获取后续操作')
    // 释放内存
    clipboard.destroy()
    emits("weixin")
  })
  // 复制失败
  clipboard.on('error', () => {
    useMessage().error('代码复制失败')
    // 释放内存
    clipboard.destroy()
  })
}


defineExpose({
  handleOpen, handleClose
})
</script>
<style lang="scss" scoped>
.k-resume-sure-diaolog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 199;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
}

.ksd-resume-close {
  position: absolute;
  right: 10px;
  top: 5px;
  z-index: 1000;
  cursor: pointer;
}

.k-resume-sure-modal {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
  color: #333;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  border-radius: 8px;
  width: 560px;
  background: #fff;
  position: fixed;
  margin: 0 auto;
  padding: 60px;
  z-index: 200;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  .bannerbox {
    img{
      width: 100%;
    }
  }
}
</style>